.queryForm {
  margin-bottom: 30px;
}

.queryInputProblemId input {
  width: 110px !important;
}

.queryInputSubmitter input {
  width: 140px !important;
}

.select div[role=listbox] {
  min-width: 0 !important;

  :global(.icon) {
    margin-left: -3px !important;
  }

  &> :global(.text) :global(.icon) {
    opacity: 0.5;
  }

  &:global(.active) > :global(.text) :global(.icon) {
    opacity: 1;
  }

  > :global(.text) {
    .inMenu {
      display: none;
    }
  }

  :global(.menu) {
    :global(.icon) {
      display: none;
    }
    .notInMenu {
      display: none;
    }
  }
}

.queryInputCodeLanguage div[role=listbox] {
  width: 150px !important;
}

.queryInputStatus div[role=listbox] {
  width: 220px !important;

  :global(.menu) {
    :global(.icon) {
      margin-left: -5px !important;
      display: inline-block;
    }
  }

  :global(.icon:not(.dropdown)) {
    margin-right: 9px !important;
  }
}

.queryInputStatus:not(.selectedAll) {
  :global(.icon) {
    opacity: 1 !important;
  }
}

// If the current value is "all", display it like a placeholder
.selectedAll div[role=listbox]:not(:global(.active)) > :global(.text) > span {
  color: rgba(191, 191, 191, 0.87);
}

.mySubmissions {
  margin-left: auto !important;
}

.table {
  margin-bottom: -10px !important;
}

.pagination {
  text-align: center;
  margin-top: 28px;
}

// responsive
@media only screen and (max-width: 1023px) {
  .queryForm :global(.field) {
    padding-right: 0.8em !important;
  }

  .queryInputSubmitter input {
    width: 130px !important;
  }

  .queryInputCodeLanguage div[role=listbox] {
    width: 140px !important;
  }
}

@media only screen and (max-width: 767px) {
  .queryInputStatus {
    display: none;
  }

  .table {
    margin-bottom: -14px !important;
  }

  .queryForm {
    margin-bottom: 15px;
  }

  .pagination {
    text-align: center;
    margin-top: 28px;
  }
}

@media only screen and (max-width: 559px) {
  .queryInputProblemId input {
    width: 95px !important;
  }

  .queryInputSubmitter input {
    width: 120px !important;
  }

  .queryInputCodeLanguage div[role=listbox] {
    width: 120px !important;
  }
}

@media only screen and (max-width: 491px) {
  .queryInputCodeLanguage {
    display: none;
  }
}

@media only screen and (max-width: 375px) {
  .queryButton {
    display: none !important;
  }

  .queryInputProblemId input {
    width: 90px !important;
  }

  .queryInputSubmitter input {
    width: 105px !important;
  }
}
